<template>
  <div class="container">
      <div class="user-data">
          <div class="user-icon">
            <div class="add-img">
                <h3>头像:</h3>
                <input type="file" class="add-img-btn" ref="img_upload" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" @change="add_icon"/>
            </div>              
            <div class="user-icon">
                <img :src="img_src" alt="">
            </div>                
          </div>

          <div class="user-message">
            <div>
              <h3>用户名:</h3>
              <input type="text"  v-model="name">
            </div>

            <div>
              <h3>密码:</h3>
              <input type="password" placeholder="至少6位，请使用数字和字母的组合作为密码"  v-model="password">
            </div>

            <div>
              <h3>确认密码:</h3>
              <input type="password" placeholder="至少6位，请使用数字和字母的组合作为密码"  v-model="check_password">
            </div>

          </div>
      </div>



      <div class="btn-group">
          <button class="register" @click="register">注册</button>

          <router-link to="/login">
            <button class="login">返回登录</button>
          </router-link>
          
      </div>

      <div class="warning">
          <h2>{{warning}}</h2>          
      </div>
  </div>
</template>

<script>

export default{
    data(){
        return{
            img_src:this.$store.state.register_data.user_icon,
            name:'',
            password:'',
            check_password:'',
            warning:''
        }
    },
    mounted:function(){
        this.$store.commit('setTitle','register');
        this.$store.commit('switchIsOriginPath',false);          
    },
    watch: {
        
    },
    methods:{

        add_icon(){
            let reads = new FileReader();

            var f = this.$refs.img_upload.files[0];
            reads.readAsDataURL(f);
            reads.onloadend=(e) =>{
                this.img_src=e.target.result;
            } 
        },

        register(){
            if(this.name.length===0){
                this.warning='用户名不能为空';
            }else if(this.password.length===0){
                this.warning='密码不能为空';
            }else if(this.password.length<6){
                this.warning='密码至少6位';
            }else if(this.password!=this.check_password){
                this.warning='两次密码不一致';
            }else if(/^[0-9]+$/.test(this.password)||/^[a-z]+$/.test(this.password)||/^[A-Z]+$/.test(this.password)){
                this.warning='请使用数字加字母的组合';
            }else if(this.img_src==this.$store.state.register_data.user_icon){
                this.warning='请设置头像';
            }else{
                //连接服务器验证
                var register_data={
                    user_name:this.name,
                    password:this.password,
                    img_src:this.img_src
                }
                this.postMessage(register_data)
            }            
        },

        postMessage(register_data){
            this.$http.post(this.$store.state.server_home_url+'/register',register_data)
            .then((res)=>{
                if(res.body.status==0){
                    console.log("注册成功");
                    this.$router.push({path:'/register/success'});
                }else{
                    this.warning='该用户名已被使用';
                }
            })
        },
        
    }
}
</script>


<style lang="scss" scoped>
    .container{
        .user-data{
            margin-left:10%;

            .user-icon{
                display: flex;
                .add-img{
                    
                    .add-img-btn{
                        text-indent:-9999px;
                        overflow:hidden;
                        width: 40px;
                        height: 40px;
                        background: url('../../../images/icons/add-photo-btn.png');
                        background-size:40px 40px;  
                    }
                }
                .user-icon{
                    margin-top: 5%;
                    margin-left: 20%;
                    img{
                        width: 85px;
                        height:85px;
                        border-radius: 50px 50px;                        
                    }
                }                                
            }

            .user-message{
                margin-top:5%;
                div{
                    margin-top:5%;
                    h3{
                        display: block;
                        margin: 0 0 0 0;               
                    }
                    input{
                        width: 90%;
                        border: 1px black solid;
                        margin: 0 0 0 0;
                    }
                }

            }



        }
        .warning{
            margin-top:10%;
            text-align: center; 
            color: red;             
        }
        .btn-group{
            margin-top:10%;
            margin-left:22%;
            display: flex;
            flex-direction: column;
            button{
                margin-top:4%;
                width: 70%;
                height: 40px;
                color:white;
                font-size: 20px;
                border-radius: 10px 10px;
            }
            .login{
                background: #009a44;
            }
            .register{
                background: #00a0ea;
            }
        }
    }
</style>
